<template>
  <div class="chapter5">
    <h1>Vue Router教程</h1>
    <ul>
      <li><router-link to="/chapter5/1">1. 路由基础</router-link></li>
      <li><router-link to="/chapter5/2">2. 动态路由匹配</router-link></li>
      <li><router-link to="/chapter5/3">3. 嵌套路由</router-link></li>
      <li><router-link to="/chapter5/4">4. 编程式导航</router-link></li>
      <li><router-link to="/chapter5/5">5. 命名路由</router-link></li>
      <!-- 这里可以添加更多本章的知识点链接 -->
    </ul>
    <router-view></router-view>
  </div>
</template>

<script setup>
// 使用 <script setup> 语法
</script>

<style scoped>
.chapter5 {
  padding: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style> 